﻿@{
    ViewBag.Title = "Create";
}

<script>
    function DecodeHtml(str) {
        return $('<div/>').html(str).text();
    }


    function GetMovieInfo() {
        document.getElementById('LoadingGif').style.display = 'inline-block';
        var MovieTitle = document.getElementById('MovieTitle').value;
        var Year = document.getElementById('Year').value;

        $.ajax({
            url: '@Url.Content("~/Movie/GetMovieInfo?Title=")' + MovieTitle + "(" + Year + ")",
            type: 'POST',
            dataType: '',
            data: '{}',
            contentType: 'appliction/json; charset=utf-8',
            success: function (data) {
                document.getElementById('MovieTitle').value = data.Title;
                document.getElementById('Year').value = data.Year;
                document.getElementById('Rating').value = data.Rating;
                document.getElementById('MpaaRating').value = data.MpaaRating;
                document.getElementById('Description').value = data.Storyline;
                for (i = 0; i < data.Genres; i++) {
                    document.getElementById('Genres').value += data.Genres[i];
                }
                document.getElementById('Genres').value.replace(",", ", ");
                document.getElementById('Genres').value = data.Genres;
                document.getElementById('LoadingGif').style.display = 'none';
                document.getElementById('Poster').src = data.Poster;
            }
        });
    }

    function ClearAll() {
        document.getElementById('MovieTitle').value = "";
        document.getElementById('Year').value = "";
        document.getElementById('Rating').value = "";
        document.getElementById('MpaaRating').value = "";
        document.getElementById('Genres').value = "";
        document.getElementById('Description').value = "";
        document.getElementById('Poster').src = "";
    }
</script>

<h2 style="display:inline-block;">Add Movie</h2>
<img id="LoadingGif" src="../../Content/images/loadera64.gif" style="width:20px;height:20px;display:none;"/><br />
<div id="form1" style="display:inline-block;">	

	<fieldset><legend></legend>
		<p class="first">
			<label for="name">Title:</label>
			<input type="text" id="MovieTitle" />
		</p>
		<p>
			<label for="email">Year:</label>
			<input type="text" id="Year" />
		</p>
		<p>
			<label for="web">Rating:</label>
			<input type="text" id="Rating" />
		</p>
        <p>
			<label for="web">MPAA:</label>
			<input type="text" id="MpaaRating" />
		</p>
        <p>
			<label for="web">Genres:</label>
			<input type="text" id="Genres" />
		</p>					
	</fieldset>
    <fieldset>
        <p>
            <label for="Poster">Poster:</label>
            <fieldset style="margin-top: -7px;margin-left: 0px;width:261px;height:249px;border:1px solid #ddd; background:#fff url(../Content/images/form1/form_input.gif) repeat-x;">
                <img width="261px" height="249px" id="Poster"/>
            </fieldset>
        </p>
    </fieldset>
	<fieldset>																			
		<p>
			<label for="message">Storyline:</label>
			<textarea style="width:540px" id="Description" cols="200" rows="15"></textarea>
		</p>								
	</fieldset>					

    
	<p class="submit"><button id="btnClearAll" onclick="ClearAll();">Clear All</button>	<button id="btnGetMovieInfo" onclick="GetMovieInfo();">Get Info From IMDB</button></p>		
						
</div>	
